<template>
  <el-card>
    <div class="app-container">
<!--    模糊查询区域-->
    <el-form ref="searchForm" :model="searchData" size="small" label-width="100px">
      <el-row :gutter="15">
        <el-col :span="6">
          <el-form-item label="字典名称：" prop="dictName">
            <el-input v-model="searchData.dictName" placeholder="请输入字典名称" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="字典类型：" prop="dictType">
            <el-input v-model="searchData.dictType" placeholder="请输入字典类型" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="状态：" prop="status">
            <el-select v-model="searchData.status" placeholder="请选择状态" clearable :style="{width: '100%'}">
              <el-option v-for="(item, index) in statusOptions" :key="index" :label="item.label"
                         :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="创建时间：" prop="createTime">
            <el-date-picker type="daterange" v-model="createTime" format="yyyy-MM-dd"
                            value-format="yyyy-MM-dd" :style="{width: '100%'}" start-placeholder="开始日期"
                            end-placeholder="结束日期" range-separator="至" clearable></el-date-picker>
          </el-form-item>
        </el-col>
        <div style="float: right">
          <el-button type="success" @click="submitForm" icon="el-icon-search" size="small">搜索</el-button>
          <el-button type="warning" @click="resetForm" icon="el-icon-refresh-left" size="small">重置</el-button>
        </div>
      </el-row>
    </el-form>
<!--    按钮区域-->
    <div style="margin-bottom: 10px">
      <el-button size="small" type="success" icon="el-icon-plus" @click="addAction">新增</el-button>
      <el-button size="small" type="warning" icon="el-icon-edit" @click="editAction" :disabled="simple">修改</el-button>
      <el-button size="small" type="danger" icon="el-icon-delete" @click="deleteAction" :disabled="multiple">删除</el-button>
    </div>
<!--    字典列表-->
    <el-table :data="tableData" stripe style="width: 100%" border stripe  @selection-change="handleSelectionChange" @cell-click = "clickedAction"
              :header-cell-style="{'text-align':'center'}"
              :cell-style="{'text-align':'center'}">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column type="index" width="50" label="序号"></el-table-column>
      <el-table-column prop="dictName" label="字典名称"></el-table-column>
      <el-table-column prop="dictType" label="字典类型"></el-table-column>
      <el-table-column prop="status" label="状态">
        <template slot-scope="scope">
          <span v-if="scope.row.status==0">激活</span>
          <span v-else>锁定</span>
        </template>
      </el-table-column>
      <el-table-column prop="remark" label="备注"></el-table-column>
      <el-table-column prop="createTime" label="创建时间"></el-table-column>
    </el-table>
<!--    分页-->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="searchData.pagenum"
      :page-sizes="[10, 20, 50, 100]"
      :page-0="2"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      style="text-align: right; margin: 8px 8px ;padding: 0">
    </el-pagination>
<!--    新增或修改字典弹框-->
    <el-dialog :title="titleName" :visible.sync="dialogVisible" :before-close="closeDialog" width="60%">
      <el-form ref="formDataRef" :model="formData" :rules="rules" size="medium" label-width="100px">
        <el-row :gutter="15">
          <el-col :span="8">
            <el-form-item label="字典名称:" prop="dictName">
              <el-input v-model="formData.dictName" placeholder="请输入字典名称" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="字典类型:" prop="dictType">
              <el-input v-model="formData.dictType" placeholder="请输入字典类型" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="状态：" prop="status">
              <el-select v-model="formData.status" placeholder="请选择状态" clearable :style="{width: '100%'}">
                <el-option v-for="(item, index) in statusOptions" :key="index" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col>
            <el-form-item label="备注：" prop="remark">
              <el-input v-model="formData.remark"  type="textarea" :rows="5" placeholder="请输入备注" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="submitFormAction">确 定</el-button>
      </span>
    </el-dialog>
<!--    字典数据列表弹出框-->
    <el-dialog :title="gridDataName" :visible.sync="gridDialogVisible" :before-close="gridCloseDialog" width="60%">

      <el-table :data="gridData">
        <el-table-column width="150" property="date" label="日期"></el-table-column>
        <el-table-column width="100" property="name" label="姓名"></el-table-column>
        <el-table-column width="300" property="address" label="地址"></el-table-column>
      </el-table>
      <el-button slot="reference">click 激活</el-button>
    </el-dialog>

  </div>
  </el-card>
</template>

<script>
  import {getDictTypeList,addDictType,editDictType,deleteDictType} from 'api/dictionary'
  export default {
    name: "Dictionary",
    data() {
      return {
        //模糊查询区和分页
        createTime: undefined,
        searchData: {
          dictName: undefined,
          dictType: undefined,
          status: undefined,
          startTime:undefined,
          endTime:undefined,
          //当前页码
          pagenum: 1,
          //每页显示条数
          pagesize: 10
        },
        total: 0,
        statusOptions: [{
          "label": "激活",
          "value": '0'
        }, {
          "label": "锁定",
          "value": '1'
        }],
        //列表区
        tableData:[],
        //弹框区
        dialogVisible: false,
        formData: {
          dictName: undefined,
          dictType: undefined,
          status: undefined,
          remark: undefined,
        },
        rules: {
          dictName: [{
            required: true,
            message: '请输入字典名称',
            trigger: 'blur'
          }],
          dictType: [{
            required: true,
            message: '请输入字典类型',
            trigger: 'blur'
          }],
          status: [{
            required: true,
            message: '请输入状态',
            trigger: 'blur'
          }],
        },
        titleName: '',
        //表格勾选区域
        ids: [],
        selectionData: [],
        simple: true,
        multiple: true,
      }
    },
    created() {
      this.searchData.pagenum = 1
      this.searchData.pagesize = 10
      this.getList()
    },
    methods: {
      submitForm() {
        this.getList();
      },
      resetForm() {
        this.$refs['searchForm'].resetFields()
        this.searchData.pagenum = 1
        this.searchData.pagesize = 10
        this.createTime = undefined
        this.getList();
      },
      getList(){
        if(this.createTime!=undefined){
          this.searchData.startTime = this.createTime[0];
          this.searchData.endTime = this.createTime[1];
        }
        getDictTypeList(this.searchData).then(res=>{
          this.tableData = res.data.records
          this.total = res.data.total
        })
      },
      addAction(){
        this.dialogVisible = true
        this.titleName = '新增字典'
        this.reset();
      },
      submitFormAction(){
        this.$refs['formDataRef'].validate(valid => {
          if (!valid) return
          if(this.titleName == '新增字典'){
            addDictType(this.formData).then(res=>{
              if(res.code==200){
                this.$message.success("添加成功！")
              } else {
                this.$message.error(res.msg)
              }
              this.getList()
            })
          }else{
            editDictType(this.formData).then(res=>{
              if(res.code==200){
                this.$message.success("修改成功！")
              } else {
                this.$message.error(res.msg)
              }
              this.getList()
            })
          }
          this.dialogVisible = false
        })
      },
      editAction(){
        this.dialogVisible = true;
        this.titleName = '修改字典'
        this.formData = this.selectionData[0]
      },
      closeDialog(){
        this.reset()
        this.dialogVisible = false
      },
      reset(){
        this.formData = {
          dictName: undefined,
          dictType: undefined,
          status: undefined,
          remark: undefined,
        }
        this.$refs['formDataRef'].resetFields()
      },
      handleSelectionChange(selection){
        this.simple = selection.length!=1
        this.multiple = !selection.length
        this.selectionData = selection
        this.ids  = selection.map(item=>{
          return item.dictId
        })
      },
      deleteAction(){
        deleteDictType(this.ids).then(res=>{
          if(res.code==200){
            this.$message.success('删除成功！')
          }else{
            this.$message.error('删除失败！')
          }
          this.getList()
        })
      },
      //每页多少条
      handleSizeChange(val){
        this.searchData.pageSize = val;
        this.getList();
      },
      //当前页为
      handleCurrentChange(){
        this.searchData.pagenum = val;
        this.getList();
      },
      clickedAction(){
        this.dialogVisible = true;
      }
    }
  }
</script>

<style scoped>

</style>